<template>
  <div class="home-container">
    <el-container>
      <el-header height='70px'>
        <div id="header">
          <div>
            <img src="../assets/jx.png" alt="logo">
            <span class="text-top">阜信工计协官网后台管理</span>
          </div>
          
          <el-button type="info" @click="logout">安全退出</el-button>
        </div>
        
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside :width="isCollpse? '64px' : '200px'">
          <!-- 控制展开与收起 -->
          <div 
            class='toggle-button' 
            @click='toggleCollpes'
            type='info'>|||</div>
          <!-- 侧边栏菜单 -->
          <el-menu
            :collapse='isCollpse'
            :collapse-transition="false"
            background-color="#333744"
            text-color="#fff"
            unique-opened
            router
            :default-active="activePath">

            <!-- 一级菜单 -->
            <!-- 一级菜单的 index 必须是一个字符串 -->
            <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
            <template slot="title">
              <i :class="iconsObject[item.id]"></i>
              <span>{{item.title}}</span>
            </template>
            <el-menu-item  :index="it.path+''" v-for="it in item.slist" :key="it.id"  @click="saveNavState(it.path+'')">
              <template slot="title" >
                <i :class="iconsObject[it.id]"></i>
                <span>{{it.title}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 给主体区域设置路由 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: [],
      isCollpse: false,
      menuList: [],
      iconsObject: {
        '100':'iconfont icon-role',
        '101':'iconfont icon-administrators',
        '102':'iconfont icon-guanliyuan',
        '200':'iconfont icon-Chat-Outlined',
        '201':'iconfont icon-Passengerdetails-Outlined',
        '202':'iconfont icon-Edit-Outlined',
        '203':'iconfont icon-Copy-1-Outlined',
        '300':'iconfont icon-Folder-Outlined',
        '301':'iconfont icon-Data-Outlined',
        '302':'iconfont icon-sousuo',
        '303':'iconfont icon-pic',
        '500':'iconfont icon-caidan',
        '501':'iconfont icon-Settings-Outlined',
        '504':'iconfont icon-Export-Outlined'
      },
      iconsObj: [
        'el-icon-location',
        'el-icon-setting',
        'el-icon-document',
        'el-icon-menu',
      ],
      activePath: ''
    }
  },
  created() {
    // 在Home组件被创建的时候，
    // 就要把sessionStorage中保存的activePath存放到this.activePath中，
    // 以便default-active可以顺利获取到正确的属性值
    this.activePath = window.sessionStorage.getItem('activePath')
    this.getMenuList();
  },
  methods: {
    // 获取所有的导航菜单
    async getMenuList(){
      const {data:res} = await this.$http.post("menus");
      if( res.code != 200) return this.$message.error("菜单获取失败");
      this.menuList = res.data;
    },

    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },

    toggleCollpes() {
      this.isCollpse = !this.isCollpse
    },
    // 保存菜单的激活状态
    saveNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
  .el-container {
    height: 100%;
  }
}

.el-header {
  background: #373d41;
  padding: 0;
  height: 100px;
  color: #fff;
  
  > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
      .text-top{
        line-height: 70px;
        position:absolute;
      }
  }
    img {
      width: 70px;
      // height: 60px;
    }
    span {
      padding-left: 20px;
      font-size: 1.5em;
    }
}

.el-aside {
  background: #333744;
  overflow: hidden;
  .el-button {
    width: 100%;
  }
}

.el-main {
  background: #fff;
}

.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.3em;
  cursor: pointer;
}
</style>
